<template>
	<view class="">
		
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<TbarNav title=" " :is_back="false" :isbg="1" :stickys="true"></TbarNav>
			</template>
			<view class="list">
				<view class="li" 
				
				v-for="(item, index) in dataList">
					<view class="img" @click="onJmup('/pages/reserve/project/details?id='+item.id)" >
						<image :src="item.image_input" mode="aspectFill"></image>
					</view>
					
					<view class="info">
						<view class="title" @click="onJmup('/pages/reserve/project/details?id='+item.id)" >
							{{item.title}}
						</view>
						
						<view class="mod">
							<view class="left">
								<view class="span">{{item.ctitle}}</view>
								<view class="tps">限乘：{{item.limited}} 人</view>
							</view>
							
							<view class="right">
								<button @click="onJmup('/pages/reserve/project/order?id='+item.id)" >立即预约</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		
		<pageFooter></pageFooter>
	</view>
</template>

<script>
	import { getProjectList } from '@/api/reserve.js';
	import tabBar from "@/pages/index/visualization/components/tabBar.vue";
	import pageFooter from '@/components/pageFooter/index.vue'
	import TbarNav from '@/components/TbarNav'
	export default {
		components: {
			tabBar,
			pageFooter,
			TbarNav
		},
		data() {
			return {
				dataList: [],
				baseUrl: this.$baseUrl
			}
		},
		methods: {
			onJmup(url) {
				uni.navigateTo({
					url: url
				})
			},
			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				const params = {
					page: pageNo,
					pageSize: pageSize
				}
				getProjectList(params).then(res => {
					this.$refs.paging.complete(res.data.data);
				})
			}
		}
	}
</script>
<style>
	page {
		background: #003153;
	}
</style>
<style scoped lang="scss">
	.list {
		padding: 30rpx;
		.li {
			width: 100%;
			background: #FFFFFF;
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			margin-bottom: 30rpx;
			.img {
				image {
					width: 100%;
					height: 378rpx;
					border-radius: 25rpx 25rpx 0 0;
				}
			}
			.info {
				padding: 15rpx;
				.title {
					font-weight: 500;
					font-size: 34rpx;
					color: #3D3D3D;
					padding: 15rpx 0;
				}
				
				.mod {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					.right {
						button {
							width: 207rpx;
							height: 62rpx;
							background: #003153;
							border-radius: 5rpx 5rpx 5rpx 5rpx;
							font-size: 35rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 60rpx;
						}
					}
					.left {
						display: flex;
						align-items: center;
						font-size: 25rpx;
						color: #979797;
						.span {
							width: 98rpx;
							height: 47rpx;
							background: #F0F4FB;
							border-radius: 5rpx 5rpx 5rpx 5rpx;
							font-weight: 400;
							font-size: 30rpx;
							color: #1677FF;
							line-height: 47rpx;
							text-align: center;
							margin-right: 25rpx;
						}
					}
				}
			}
		}
	}
	
</style>